<template>
    <div>
        <van-tabs v-model="active" color="#1989fa"  @change="onchange"
        sticky animated swipeable
        line-width="33.3%"
        offset-top="50">
          <van-tab title="我的待办" >
              <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                  <van-list 
                    id="todoList"
                    v-model="loading"
                    :finished="finished"
                    :finished-text='!haveTodoError?"没有更多数据":"" '
                    :error-text="todoErromessage"
                    @load="onLoad"
                    style="margin-bottom: 50px;">
                    <van-cell v-for="(item,index) in list" :key="index" @click="todetail(index,item,'1')">
                        <div class="titlefont"> {{item.receiptTitle}}</div>
                        <div class="infosfont"> 创建部门:{{item.createOrgName}}</div>
                        <div class="infosfont"> 创建人:{{item.createUserName}}</div>
                        <div class="infosfont"> 办理时间:{{timeUtil(item.previousAssistantDate)}}</div>
                    </van-cell>
                    <div v-show="!haveTodoData" class="text-c" >
                        <img
                            width="100px" height="100px" 
                            :src="require('@/assets/images/pic_nodata.png')"
                            alt="暂无数据"
                            style="margin: 120px 50px 0"
                            @click="getListdata('todo')"
                        />
                    </div>   
                    
                    <div v-show="haveTodoError" class="text-c" >
                        <img
                            width="100px" height="100px" 
                            :src="require('@/assets/images/pic_neterror.png')"
                            alt="获取数据失败"
                            style="margin: 120px 50px 0"
                            @click="getListdata('todo')"
                        />
                        <div class="color-b font14" style="margin: 20px 0 0 15px">
                            获取数据失败!
                        </div>
                    </div>     
                  </van-list>
                 
                   
              </van-pull-refresh>
          
          </van-tab>
          <van-tab title="我的已办">
                <van-pull-refresh v-model="refreshing2" @refresh="onRefresh2" immediate-check="false">
                  <van-list 
                     id="didList"
                    v-model="loading2"
                    :finished="finished2"
                    :finished-text='!haveDidError?"没有更多数据":"" '
                    :error-text="didErromessage"
                    @load="onLoad2"
                    style="margin-bottom: 50px;">
                    <van-cell v-for="(item,index) in list2" :key="index" @click="todetail(index,item,'2')" >
                        <div class="titlefont"> {{item.receiptTitle}}</div>
                        <div class="infosfont"> 创建部门:{{item.createOrgName}}</div>
                        <div class="infosfont"> 创建人:{{item.createUserName}}</div>
                        <div class="infosfont"> 办理时间:{{timeUtil(item.previousAssistantDate)}}</div>
                    </van-cell>
                    <div v-show="!haveDidData" class="text-c">
                        <img
                            width="100px" height="100px" 
                            :src="require('@/assets/images/pic_nodata.png')"
                            alt="暂无数据"
                            style="margin: 120px 50px 0"
                            @click="getListdata('did')"
                        />
                        
                    </div>
                    <div v-show="haveDidError" class="text-c" >
                        <img
                            width="100px" height="100px" 
                            :src="require('@/assets/images/pic_neterror.png')"
                            alt="获取数据失败"
                            style="margin: 120px 50px 0"
                            @click="getListdata('did')"
                        />
                        <div class="color-b font14" style="margin: 20px 0 0 15px">
                            获取数据失败!
                    </div>
                </div>         
                  </van-list>
                 
              </van-pull-refresh>
          </van-tab>
          <van-tab title="我的草稿">
                <van-pull-refresh v-model="refreshing3" @refresh="onRefresh3" immediate-check="false">
                  <van-list 
                    id="drawList"
                    v-model="loading3"
                    :finished="finished3"
                    :finished-text='!haveDrawError?"没有更多数据":"" '
                    :error-text="drawErromessage"
                    @load="onLoad3"
                    style="margin-bottom: 50px;">
                    <van-cell v-for="(item,index) in list3" :key="index" @click="todetail(index,item,'3')" >
                        <div class="titlefont"> {{item.PM_INS_TITLE}}</div>
                        <div class="infosfont"> 创建时间:{{item.CREATED_TIME}}</div>
                        <div class="infosfont"> 最后一次修改时间:{{item.MODIFIED_TIME}}</div>
                        <div class="infosfont"> 流程类型:{{item.PM_INS_TYPE_NAME}}</div>
                    </van-cell>
                    <div v-show="!haveDrawData" class="text-c">
                        <img
                            width="100px" height="100px" 
                            :src="require('@/assets/images/pic_nodata.png')"
                            alt="暂无数据"
                            style="margin: 120px 50px 0"
                            @click="getListdata('draw')"
                        />
                        
                    </div>
                    <div v-show="haveDrawError" class="text-c" >
                        <img
                            width="100px" height="100px" 
                            :src="require('@/assets/images/pic_neterror.png')"
                            alt="获取数据失败"
                            style="margin: 120px 50px 0"
                            @click="getListdata('draw')"
                        />
                        <div class="color-b font14" style="margin: 20px 0 0 15px">
                            获取数据失败!
                    </div>
                </div>         
                  </van-list>
                 
              </van-pull-refresh>
          </van-tab>
        </van-tabs>
        
    </div>
</template>
<script>
import {getTodoList,getDidList,getDrawList} from "@/api/zbjqxxzdapi";
import {Toast} from "vant";
import {Notify} from "vant";
import { mapGetters } from "vuex";
import moment from 'moment'

export default {
    name:'xxzdtab0',
    data(){ 
        return{
            active:0,
            list:[],
            list2:[],
            list3:[],
            refreshing:false,
            loading:false,
            finished:false, 
            refreshing2:false,
            loading2:false,
            finished2:false,
            refreshing3:false,
            loading3:false,
            finished3:false,
            gettodoListQuery:{source:"MOBILE",page:1,rows:10,size:10},
            getdidiListQuery:{source:"MOBILE",page:1,rows:10,size:10},
            getdrawListQuery:{source:"MOBILE",page:1,rows:10,size:10},
            maxpagetodo:100,
            maxpagedid:100,
            maxpagedraw:100,
            todoErromessage:'',
            didErromessage:'',
            drawErromessage:'',
            haveTodoData:true,
            haveDidData:true,
            haveDrawData:true,
            searchTitle:'',
            haveTodoError:false,
            haveDidError:false,
            haveDrawError:false
        }
    },
    computed:{
        ...mapGetters(["user"]),
        ...mapGetters(["userinfo"]),
        ...mapGetters(["hassetmenu"]),
    }, 
    activated(){
            let dom = document.getElementById('todoList');
            if (dom != null) {
                    if (dom.scrollTop > 0) {
                        dom.scrollTop = 0;
                    }
            }
            let dom2 = document.getElementById('didList');
            if (dom2 != null) {
                    if (dom2.scrollTop > 0) {
                        dom2.scrollTop = 0;
                    }
            }
            let dom3 = document.getElementById('drawList');
            if (dom3 != null) {
                    if (dom3.scrollTop > 0) {
                        dom3.scrollTop = 0;
                    }
            }
            
    }, 
    created() {
       
    },
    mounted(){
          if (localStorage.getItem('xxzdtodoactiveNumber') != ''&&localStorage.getItem('xxzdtodoactiveNumber')) {
          this.active = JSON.parse(localStorage.getItem('xxzdtodoactiveNumber'))
          this.onchange(this.active);
          if(this.active==0){
            this.active=0;
          }else if(this.active==1){
            this.active=1;
          }else if(this.active==2){
            this.active=2;
          }else{
            this.active=0;
          }
          localStorage.setItem('xxzdtodoactiveNumber', '')
        }
    },
    methods:{
        //查询
        setsearchdata(title){
            this.searchTitle = title;
            if(this.active==0){
                this.onRefresh();
            }else if(this.active==1){
                this.onRefresh2();
            }else if(this.active==2){
                this.onRefresh3();
            }
        },
         onchange(index){
             this.searchTitle = '';
         },   
         onRefresh(){  
            //清空列表数据
            this.finished =false;
            //重新加载数据
            //将loading设置为true,表示处于加载状态
            this.loading = true;
            this.refreshing = true;
            this.gettodoListQuery.page=1;
            this.maxpagetodo=100;
            this.onLoad();
        },
         onRefresh2(){
            //清空列表数据
            this.finished2 =false;
            //重新加载数据
            //将loading设置为true,表示处于加载状态
            this.loading2 = true;
            this.refreshing2 = true;
            this.getdidiListQuery.page=1;
            this.maxpagedid =100;
            this.onLoad2();
        },
        onRefresh3(){
            //清空列表数据
            this.finished3 =false;
            //重新加载数据
            //将loading设置为true,表示处于加载状态
            this.loading3 = true;
            this.refreshing3 = true;
            this.getdrawListQuery.page=1;
            this.maxpagedraw =100;
            this.onLoad3();
        },
        onLoad(){
            // setTimeout(() =>{
                if(this.refreshing){
                    this.list=[];
                    this.refreshing =false
                }
                console.log("AAAAA"+this.user.userName)
                if(this.gettodoListQuery.page<=this.maxpagetodo){  
                    getTodoList(Object.assign(this.gettodoListQuery,
                    {userName:this.user.userName},
                        {searchTitle:this.searchTitle},
                    ))
                    .then((result) =>{
                        this.haveTodoError=false;
                        if(!result.data){
                            this.loading=false;
                            this.finished=true;
                            Notify(result.message);
                            this.todoErromessage=result.message;
                            return;
                        }
                        let listdetails = this.list;
                        if(this.gettodoListQuery.page==1){
                            listdetails=[];
                            if(result.data.data.content){
                                listdetails=result.data.data.content;
                            }
                            if(listdetails.length==0){
                                this.haveTodoData=false;
                            }else{
                                this.haveTodoData=true;
                            }
                            this.maxpagetodo=result.data.data.totalPages;
                        }else{
                            if(result.data.data.content){
                                listdetails = listdetails.concat(result.data.data.content);
                            }
                        }
                        
                        this.list=listdetails;
                        this.loading =false;
                        this.gettodoListQuery.page=this.gettodoListQuery.page+1;
                    })
                    .catch((error) => {
                        console.log("22222222222"+JSON.stringify(error));
                        this.loading = false
                        this.finished=true;
                        this.haveTodoData=true;
                        this.todoErromessage='获取数据失败,请稍后重试';
                        this.haveTodoError=true,
                        Notify({ type: 'warning', message: '获取数据失败,请稍后重试' })
                    });
                }else{
                    this.loading = false
                    this.finished=true;
                }
            // },1000);
        },
        onLoad2(){
            if(this.refreshing2){
                this.list2=[];
                this.refreshing2 =false ;
            }
            if(this.getdidiListQuery.page<=this.maxpagedid){
                getDidList(Object.assign(this.getdidiListQuery,
                {userName:this.user.userName},
                {searchTitle:this.searchTitle},
                ))
                .then((result)=>{
                    this.haveDidError=false;
                    if(!result.data){
                        this.finished2=true;
                        this.loading2 = false;
                        Notify(result.message);
                        this.didErromessage=result.message;
                        return;
                    }
                    let listdetails =this.list2;
                    if(this.getdidiListQuery.page==1){
                        listdetails = [];
                        if(result.data.data.content){
                            listdetails = result.data.data.content;             
                        }
                        if(listdetails.length==0){
                            this.haveDidData=false;
                        }else{
                            this.haveDidData=true;
                        }
                        this.maxpagedid = result.data.data.totalPages;
                    }else{
                        if(result.data.data.content){
                            listdetails = listdetails.concat(result.data.data.content);
                        }
                    }
                    this.list2 = listdetails;
                    this.loading2 = false;
                    this.getdidiListQuery.page  = this.getdidiListQuery.page + 1;
                }) 
                .catch((error) => {
                    this.haveDidError=true;
                    this.haveDidData=true;
                    this.loading2 = false
                    this.finished2  = true;
                    this.didErromessage='获取数据失败,请稍后重试';
                    Notify({ type: 'warning', message: '获取数据失败,请稍后重试' })
                })
            }else{
                this.loading2 = false
                this.finished2  = true; 
            }
        },
        onLoad3(){
            if(this.refreshing3){
                this.list3=[];
                this.refreshing3 =false ;
            }
            if(this.getdrawListQuery.page<=this.maxpagedraw){
                getDrawList(Object.assign(this.getdrawListQuery,
                {userName:this.user.userName},
                {searchTitle:this.searchTitle},
                ))
                .then((result)=>{
                    this.haveDrawError=false;
                    if(!result.data){
                        this.finished3=true;
                        this.loading3 = false;
                        Notify(result.message);
                        this.drawErromessage=result.message;
                        return;
                    }
                    let listdetails =this.list3;
                    if(this.getdrawListQuery.page==1){
                        listdetails = [];
                        if(result.data.data.content){
                            listdetails = result.data.data.content;             
                        }
                        if(listdetails.length==0){
                            this.haveDrawData=false;
                        }else{
                            this.haveDrawData=true;
                        }
                        this.maxpagedraw = result.data.data.totalPages;
                    }else{
                        if(result.data.data.content){
                            listdetails = listdetails.concat(result.data.data.content);
                        }
                    }
                    for(var i=0;i<listdetails.length;i++){
                        if(listdetails[i].PM_INS_TYPE=="A"){
                            listdetails[i].PM_INS_TYPE_NAME="支部近期学习重点";
                        }
                    }
                    this.list3 = listdetails;
                    this.loading3 = false;
                    this.getdrawListQuery.page  = this.getdrawListQuery.page + 1;
                }) 
                .catch((error) => {
                    this.haveDrawError=true;
                    this.haveDrawData=true;
                    this.loading3 = false
                    this.finished3  = true;
                    this.drawErromessage='获取数据失败,请稍后重试';
                    Notify({ type: 'warning', message: '获取数据失败,请稍后重试' })
                })
            }else{
                this.loading3 = false
                this.finished3  = true; 
            }
        },
        timeUtil(value){
            return moment(value).format('YYYY-MM-DD HH:mm:ss');
        },
        getListdata(value){
            if(value='todo'){
                this.onRefresh();
            }else if(value='did'){
                this.onRefresh2();
            }else {
                this.onRefresh3();
            }
        },
        todetail(index,value,istodo){
            console.log('所选择的工单3213类型是'+istodo)
             console.log('000000000')
            if(istodo=='1'){ //待办
             console.log('1111111111111')
                 localStorage.setItem('xxzdtodoactiveNumber', 0)
                 var todoType='1';
                 var workFlag='task';
            }else if(istodo=='2'){ //已办
              console.log('222222222222222')
                 localStorage.setItem('xxzdtodoactiveNumber', 1)
                 var todoType='2';
                 var workFlag='join';
            }else if(istodo=='3'){ //草稿
              console.log('3333333333333')
                 localStorage.setItem('xxzdtodoactiveNumber', 2)
                 var todoType='3';
                 var workFlag='draft';
            }
             console.log('44444444444')
            if(istodo=='3'){
                this.$router.push(
                    {
                        name:'xxzddetail',
                        query:{
                            location:'zbjqxxzd.start',
                            processInstId:'',
                            processDefName:'',
                            workItemId:'',
                            pmInsId:value.PM_INS_ID,
                            workFlag:workFlag,
                            todoType:todoType,
                            isdraw:'0'
                        }
                    }
                )
            }else{
                this.$router.push(
                    {
                        name:'xxzddetail',
                        query:{
                            location:value.activityDefId,
                            processInstId:value.processInstId,
                            processDefName:value.processDefName,
                            workItemId:value.workItemId,
                            pmInsId:value.receiptCode,
                            workFlag:workFlag,
                            todoType:todoType,
                            isdraw:'0'
                        }
                    }
                )
            }
            
        }
       
    }
}
</script>
<style scoped>
 .btn{
     margin-bottom: 60px;
     margin-top: 60px;
 }

  .custom-image .van-empty__image {
    width: 90px;
    height: 90px;
  }
</style>